<template>
	<view class="wrapper">
    <v-product-list :list="list" />
    <view class="nothing" v-if="list.length === 0">暂无相关商品</view>
  </view>
</template>

<script>
import ProductList from '../../components/product-list/index'
import base64 from '../../util/base64'
import Product from '../../api/product'
const productModel = new Product()
	export default {
    components: {
      'v-product-list': ProductList
    },
		data() {
			return {
			  id: 0,
			  list: [],
        queryList: {
          page: 0,
          pageSize: 20,
          busy: false
        },
        title: '',
			}
		},
		onLoad(options) {
      this.id = options.id
      this.getList()
		},
    onReachBottom() {
      this.getList(true)
    },
		methods: {
      getList(append = false) {
        if (this.queryList.busy === false) {
          this.queryList.page++
          this.loading = true
          this.queryList.busy = true
          productModel.area({
            ...this.queryList,
            id: this.id
          }).then(response => {
            let { data } = response
            data = base64.parse(data)
            this.title = data.title
            uni.setNavigationBarTitle({
              title: this.title
            })
            if (data.list.length === 0) {
              this.queryList.busy = true
            } else {
              this.queryList.busy = false
              if (append) {
                this.list = this.list.concat(data.list)
              } else {
                this.list = data.list
              }
            }
          })
        }
      }
		}
	}
</script>

<style lang="scss" scoped>
.wrapper {
  background: $background_color;
  padding: 20rpx 0;
  min-height: 100vh;
  .nothing {
    color: #999999;
    min-height: 300rpx;
    background: white;
    margin: 0 20rpx;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
  }
}
</style>
